<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: yellow;
            border: 0;
            outline: 0;
            font-size:20px;
        }
    </style>
</head>
<body>
    <h1>省市联动</h1>
    省<select onchange="huan()" id="pro">
        <option>请选择...</option>
    </select>
    市<select id="city"></select>
    区

    <h1> 表格 </h1>
    能直接在网页上修改 格子内容
    <table border="1" width="300" onclick="tbupdate()">
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
    </table>
</body>
<script>
// td 放入文本框
function tbupdate(){
    var obj = event.srcElement; 
    if( obj.tagName == 'TD'){
        let v = obj.innerText; 
        obj.innerHTML = `<input onblur="tdset(this)" type="text" value="${v}" />`
    }
}
//完成修改
function tdset( inp ){
    let v =  inp.value ;  // 文本框的值
    inp.parentNode.innerText = v;
}

var cl = new Array();//数组
cl['福建省'] = ['福州市', '厦门市', '泉州市', '漳州市'];
cl['山东省'] = ['济南市', '青岛市', '烟台市'];
cl['江西省'] = ['赣州省', '南昌市'];
cl['广西省'] = ['柳州市', '南宁市','桂林市'];
cl['安徽省'] = ['芜湖市', '合肥市'];
cl['河北省'] = ['邯郸市', '石家庄市'];
cl['河南省'] = ['郑州市', '洛阳市'];
cl['湖北省'] = ['武汉市', '宜昌市'];
cl['湖南省'] = ['长沙市','株洲市','湘潭市','邵阳市'];
cl['陕西省'] = ['咸阳市', '西安市'];
cl['山西省'] = ['运城市', '太原市'];
cl['黑龙江省'] = ['齐齐哈尔市', '哈尔滨市'];


var sheng =  document.querySelector('#pro');
var shi =  document.querySelector('#city');
for(let v in cl){
    var op = document.createElement('option');
    op.innerHTML = v;
    sheng.add( op );
}

// // 你切换了省名
function huan(){
    shi.options.length = 0 ;
    console.log('你切换了', sheng.value );
    let sz = cl[sheng.value];
    for(let i in sz){
        var op = document.createElement('option');
        op.innerHTML = sz[i];
        shi.add( op );
    }
}


</script>

</html>